<template>
	<view class="tn-load-more-class tn-load-more">
		<view class="tn-load-more__wrap" @click="loadMore" v-if="!empty">
			<m-line color="#7fb1f0" length="100rpx" :hairline="true"></m-line>

			<view class="tn-load-more__content"
				:class="[{'tn-load-more__content--more': (state === 'lom' || state === 'no')}]">
				<view class="tn-load-more__loading" v-if="state === 'lo'">
					<m-loading-icon iconColor="#7fb1f0"></m-loading-icon>
				</view>
				<text class="text_28" style="color: #4A4A4A;">{{showText}}</text>
			</view>

			<m-line color="#7fb1f0" length="100rpx" :hairline="true"></m-line>
		</view>
		<view style="padding-top: 200rpx; margin: 0 auto;" v-else>
			暂无数据
		</view>


		<!-- 安全区 -->
		<m-bottom-paceholder height='4'></m-bottom-paceholder>
	</view>
</template>
<!-- 	// <m-load-more :state="loadingState"></m-load-more>
	// lom -> 加载更多
	// lo -> 加载中
	// no -> 没有更多 -->
<script>
	export default {
		props: {
			state: {
				type: String,
				default: 'lo'
			},
			empty: {
				type: Boolean,
				default: false
			},
			// 显示的文字
			loadText: {
				type: Object,
				default () {
					return {
						loadmore: '加载更多',
						loading: '正在加载...',
						nomore: '没有更多了'
					}
				}
			}
		},
		computed: {
			showText() {
				let text = '';
				if (this.state == 'lom') text = this.loadText.loadmore
				else if (this.state == 'lo') text = this.loadText.loading
				else text = this.loadText.nomore || '没有更多了'
				return text;
			}
		},
		methods: {
			loadMore() {
				// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
				if (this.state === 'lom') this.$emit('onClick');
			}
		}
	}
</script>

<!-- <script setup>
	// <m-load-more :state="loadingState"></m-load-more>
	// lom -> 加载更多
	// lo -> 加载中
	// no -> 没有更多
	import {
		computed,
		ref,
		watch,
	} from 'vue';
const emit = defineEmits(['onClick'])
	const props = defineProps({
		state: {
			type: String,
			default: 'lo'
		},
		empty:{
			type: Boolean,
			default: false
		},
		// 显示的文字
		loadText: {
			type: Object,
			default () {
				return {
					loadmore: '加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				}
			}
		},
	})
	let showText = computed(() => {
		let text = '';
		if (props.state == 'lom') text = props.loadText.loadmore
		else if (props.state == 'lo') text = props.loadText.loading
		else text = props.loadText.nomore || '没有更多了'
		return text;
	})
	
	function loadMore() {
		// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
		if (props.state === 'lom') emit('onClick');
	}
	
</script> -->

<style lang="scss" scoped>
	.tn-load-more-class {
		width: 100%;
	}

	.tn-load-more {
		&__wrap {
			height: 50rpx;
			background-color: transparent;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		&__content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 0 12rpx;

			&--more {
				position: relative;
			}
		}

		&__loading {
			margin-right: 8rpx;
		}
	}
</style>
